<template>
  <div class="index">
    <div class="calendar"  >
      <van-calendar type="single" ref='timer' :defaultDate='date' :show-title='false' @confirm='confirmDate' :poppable="false"
        :min-date='new Date(0)'
		
		 :row-height='40' :show-confirm="false" style="padding-bottom:10px;height:280px" />
	<van-button plain class="question " @click='show=true' icon="question-o">
		
		</van-button>
	
	<van-popup v-model="show" closeable close-icon="close"  get-container=".index"
	 :class='"selfPop"'
	 :duration='.5'  :overlay='false' 
	 >
	 {{$H(this,'atte')}}
	</van-popup>
	 </div>
      <div class="vanList van-cell--center van-cell--borderless van-contact-card van-contact-card--edit">
       
          <router-link tag="div" :to='{name:"TrainDetails",query:{lessonId:list.id}}' v-for="( list , i) in lessonList"
            :key='i' :class="'list_box '+'list_box'+i">
            <h3>
              <van-divider content-position='left' 
			  :custom-style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 5px',margin:0 }">
                <i 
				 :style="{'background-color': FilterStausClor(list.status)}"
				 class="van-hairline--left van-icon van-icon-left van-cell__left-icon"></i> {{list.courseName}}
              </van-divider>
            </h3>
            <div class="van-cell van-cell--borderless van-contact-card van-contact-card--edit  ">
              <div class="van-cell--center van-cell__value van-cell__value--alone van-contact-card__value">
                <div>{{list.sportName}}</div>
                <div>{{list.startTime }}-{{list.endTime}}</div>
                <div>{{list.locationName}}</div>
              </div>
              <van-icon name="arrow" color='#72a4a8' />
            </div>

          </router-link>
      </div>
   
  </div>
</template>

<script>
  import {
    parseTime
  } from '@/utils';
  const utilsDay = (60 * 60 * 24 * 1000) * 3;

  export default {
    name: 'index',
    data() {
      return {
        // 处理控件显示的时间格式
        minDate: new Date(new Date().getTime() - utilsDay),
        parseTime,
        maxDate: new Date(new Date().getTime() + utilsDay),
        show: false,
        date: new Date(),
        upperDate: this.formatDate(new Date()),

      };
    },
    mounted() {
      //console.log("va", this)
      this.fetchData()
    },
    updated() {

    },
    computed: {
      lessonList() {
        return this.$store.state.train.lessonList
      }
    },
    watch: {
		['$vantMessages']:{
			handler: function(Mes) {
           console.log("",Mes)
			},
			immediate: true
		},
		show(val){
			if(val){
				setTimeout(()=>this.show=!val,3500)
			}
		},
      upperDate(val) {
        console.log(this)
        this.fetchData(val)
      }
    },
    methods: {
      fetchData() {
		 // 禅道 4341
		this.$vantMessages['zh'].vanCalendar.weekdays[1]='一'
		
        this.$store.dispatch("train/lessonList", {
          upperDate: this.upperDate
        })
      },
      formatDate(dates) {

        return parseTime(dates.date ? dates.date : dates, '{y}-{m}-{d}')
      },
      confirmDate(date) {
        this.date = date
        this.upperDate = this.formatDate(date)
      }


    },

  }
</script>

<style lang='less' scoped>
	@defaulteAct:#2b9064;
  .index {
	  position: relative;
	  padding-top: 280px;
	  .selfPop{
	  	max-height:initial !important;
	  		height: auto;
	  		/* transform: translate(-102%,5%); */
	  		display: block;
	  		width: 220px;
	  		max-width: 680px;
	  		top:358px !important;
	  		right:-35px !important;
	   left: unset;
	  		padding:12px;
	  		overflow: initial;
	  		border-radius: 5px;
	  		background-color: rgba(222,222,222,.8);color:#333;line-height: 1.8;
			/* position: absolute; */
	  		.van-icon-close{
	  			top:-15px;left:unset;right:-18px; z-index: 55555;
	  		}
	  }
	  .calendar{
		
		  position: fixed;top:46px;z-index:100;
		   max-width: 750px;
		   width:100%;
		  
		  .van-calendar__header-title {
		    
		  }
		   border-bottom:1px solid #f7f8fa;
		   .van-calendar .van-calendar__body{
			    .toolbar(280px);
		   }

	  }
    .question {
      position: absolute;
      right: 26px;
    		border: 0;width:30px;height:30px;
			text-align: center;line-height: 30px;padding: 0;
      bottom: -0.5rem;
    }
    
    .vanList {
      position: relative;
       
      
      &::before {
        background: @gray-1;
      }

      .list_box {
        &:first-child {
          border-top: 0;
        }
      }

      // padding-top:20px;
      .van-cell__left-icon {
        min-width: 4px;
        margin-right: 2px;
        background: @defaulteAct;
        height: 16px;

        &::after {
          border: 0px;

          transform: scale(0.3);
        }
      }

      .van-divider--hairline {
        &:after {
          transform: scaleY(0);
        }

        &:before {
          margin-right: 2px;
          max-width: 10px;
		  background: #989898;
          transform: scaleY(1);
        }
      }

      .van-calendar__selected-day,
      .van-calendar__day {
        height: 2.5rem;
      }

      .van-contact-card {
        padding: 0 15px 15px 16px;

        &::before {
          background: @gray-1;
        }
      }
    }

  }
</style>
